<template>
    <el-select
            :model-value="value"
            :placeholder="placeholder"
            @change="onChange"
            :multiple="multiple"
            :size="size"
            :clearable="clearable"
    >
        <el-option
                v-for="item in entities.data"
                :key="item.value"
                :label="item.name"
                :value="item.value"
        >
        </el-option>
    </el-select>
</template>
<script type="ts" setup>
import {selectColumnType} from '@/api/api.dictionary'
import {defineEmits, onBeforeMount, reactive, ref, watch} from "vue";

const emit = defineEmits(["change", "update:value"]);
const entities = reactive({data: []});
const props = defineProps({
    params: {
        type: Object,
        require: false
    },
    name: {
        require: true
    },
    label: {
        default: '模版类型'
    },
    clearable: {
        default: true
    },
    size: {
        default: 'default'
    },
    placeholder: {
        default: '请选择模版类型'
    },
    multiple: {
        type: Boolean,
        default: false,
        require: false
    },
    value: {
        require: false
    }
});
const params = ref(props.params);

watch([params], () => {
    selects();
})

const selects = () => {
    selectColumnType(props.params).then(res => {
        entities.data = res.data || [];
    })
}

const inputRef = reactive({
    value: props.modelValue || ''
})

const onChange = (v) => {
    const e = entities.data.filter((e) => e.value === v)
    inputRef.value = v;
    emit('update:value', props.name, e ? e[0] : {})
}
onBeforeMount(() => {
    selects();
})
</script>
